import { InjectionKey } from 'vue'
import { createStore, Store, useStore as baseUseStore } from 'vuex'

export interface State {
  list: string[]
}

export const key: InjectionKey<Store<State>> = Symbol()

export const store = createStore<State>({
  state: {
    list: []
  },

  mutations: {
    setList(state, list) {
      state.list = state.list.concat(list)
    }
  },
  
  actions: {
    loadData({ commit }) {
      setTimeout(() => {
        commit('setList', ['a', 'b'])
      }, 1000)
    },
    changList({ commit, state }, item) {
      commit('setList', [item])
    }
  },
  modules: {
  }
})

export const useStore = function() {
  return baseUseStore(key)
}